<template>
    <div class="slider-container">
        <div class="slider" ref="slider">
            <div class="datePicker">
                <el-date-picker v-model="month" value-format="yyyy-MM" type="month" placeholder="选择月"
                    @change="datePickerChange"></el-date-picker>
                <el-button style="margin-left: 20px;" plain @click="getPdf()">下载报告</el-button>
            </div>
            <!-- <div class="slide banner1">
            </div> -->
            <!-- 月度统计报告 -->
            <monthlyReport class="slide" :month="month"></monthlyReport>
            <!-- 本月识别总人数 -->
            <peopleNumber class="slide" :month="month"></peopleNumber>
            <!-- 预警分类统计 -->
            <warningStatistics class="slide" :month="month"></warningStatistics>
            <!-- 本月人流量巅峰 -->
            <footfallMonth class="slide" :month="month"></footfallMonth>
            <!-- 时段高峰统计 -->
            <peakTimeStatistics class="slide" :month="month"></peakTimeStatistics>
            <!-- 一周流量统计 -->
            <weeklyTrafficStatistics class="slide" :month="month"></weeklyTrafficStatistics>
            <!-- 识别人数按类型分类 -->
            <peopleCountByType class="slide" :month="month"></peopleCountByType>
            <!-- 年度关怀预警 -->
            <yearCareAlerts class="slide" :month="month"></yearCareAlerts>
            <!-- 本月关怀预警 -->
            <monthCareAlerts class="slide" :month="month"></monthCareAlerts>
            <!-- 预警处理次数 -->
            <alertHandlingCount class="slide" :month="month"></alertHandlingCount>
            <!-- 预警处理时间 -->
            <alertHandlingTime class="slide" :month="month"></alertHandlingTime>
            <!-- 本月平均业务办理时长 -->
            <transactionProcessingTime class="slide" :month="month"></transactionProcessingTime>
            <!-- 本月最多一次跑问题名单 -->
            <problemList class="slide" :month="month"></problemList>

        </div>
    </div>
</template>

<script>
import monthlyReport from './components/monthlyReport.vue';
import peopleNumber from './components/peopleNumber.vue';
import warningStatistics from './components/warningStatistics.vue';
import footfallMonth from './components/footfallMonth.vue';
import peakTimeStatistics from './components/peakTimeStatistics.vue';
import weeklyTrafficStatistics from './components/weeklyTrafficStatistics.vue';
import peopleCountByType from './components/peopleCountByType.vue';
import yearCareAlerts from './components/yearCareAlerts.vue';
import monthCareAlerts from './components/monthCareAlerts.vue';
import alertHandlingCount from './components/alertHandlingCount.vue';
import alertHandlingTime from './components/alertHandlingTime.vue';
import transactionProcessingTime from './components/transactionProcessingTime.vue';
import problemList from './components/problemList.vue';
// import { getPdf } from '@/api/statistics';

export default {
    name: "bannerShow",
    components: {
        monthlyReport,
        peopleNumber,
        warningStatistics,
        footfallMonth,
        peakTimeStatistics,
        weeklyTrafficStatistics,
        peopleCountByType,
        monthCareAlerts,
        yearCareAlerts,
        alertHandlingCount,
        alertHandlingTime,
        transactionProcessingTime,
        problemList

    },

    data() {
        return {
            month: null,
            nowMonth: null,
            currentIndex: 0,
            totalSlides: 0
        };
    },

    mounted() {

        this.getDate();
        console.log('初始化month', this.month);
        this.totalSlides = this.$refs.slider.children.length - 1;
        this.updateSlider();

        document.addEventListener('wheel', this.handleScroll);
    },

    beforeDestroy() {
        document.removeEventListener('wheel', this.handleScroll);
    },

    methods: {
        getPdf() {
            // let result = getPdf();
            // if (result.code == 200) {
            //     console.log('下载报告', result.data);

            // }
            window.open('http://192.168.0.130:8082/api/SumUp/getPdf', '_blank');
        },
        getDate() {
            // 创建一个新的Date对象
            const currentDate = new Date();

            // 获取当前的年份（四位数字）
            const currentYear = currentDate.getFullYear();

            // 获取当前的月份（0-11），并加1以转换为常见的1-12格式
            const currentMonth = currentDate.getMonth() + 1;
            // 获取当前日期中的日
            // const currentDay = currentDate.getDate();
            let year, month;

            // 注意：如果当前是1月，则上个月是上一年的12月
            if (currentMonth === 1) {
                year = currentYear - 1;
                month = 12;
            } else {
                year = currentYear;
                month = currentMonth - 1;
            }
            const formattedMonth = month.toString().padStart(2, '0');
            // 使用字符串的padStart方法确保月份是两位数

            // 拼接年份和月份，并以"YYYY-MM"格式输出
            this.month = `${year}-${formattedMonth}`;
            // console.log('nowMonth:', this.nowMonth);



        },
        datePickerChange(ev) {
            console.log('datePickerChange:', ev);
            this.month = ev;

        },
        handleScroll(event) {
            // console.log('滚动监听', event);

            if (event.deltaY > 0) { // 向下滚动
                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
            } else { // 向上滚动
                this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
            }
        },
        updateSlider() {
            const offset = -this.currentIndex * 100;
            this.$refs.slider.style.transform = `translateY(${offset}%)`;
        }
    },

    watch: {
        currentIndex(newIndex) {
            // console.log('当前索引：', newIndex, '总幻灯片数:', this.totalSlides);
            if (newIndex === this.totalSlides) {
                // 如果到达最后一张图，立即跳转到第一张图
                setTimeout(() => {
                    this.currentIndex = 0;
                    this.$refs.slider.style.transition = 'none';
                    this.updateSlider();
                    setTimeout(() => {
                        this.$refs.slider.style.transition = 'transform 0.5s ease-in-out';
                    }, 0);
                }, 500); // 等待动画结束时间
            } else if (newIndex === -1) {
                // 如果到达第一张图之前，立即跳转到最后一张图
                setTimeout(() => {
                    this.currentIndex = this.totalSlides - 1;
                    this.$refs.slider.style.transition = 'none';
                    this.updateSlider();
                    setTimeout(() => {
                        this.$refs.slider.style.transition = 'transform 0.5s ease-in-out';
                    }, 0);
                }, 500); // 等待动画结束时间
            } else {
                this.updateSlider();
            }
        }
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "等线";
}

.slider {
    // display: flex;
    // flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.datePicker {
    // border: 1px solid red;
    position: fixed;
    top: 210px;
    left: 94px;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>